<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Android Repeat Data Example</title>
		<link href="../../../../../dojox/mobile/themes/android/android.css" rel="stylesheet"/>
		<link href="../css/android-format.css" rel="stylesheet"/>

	<!--  use below for iPhone theme  
		<link href="../../../../../dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>
		<link href="../css/iphone-format.css" rel="stylesheet"></link>
	-->

		<script type="text/javascript" src="../../../../../dojo/dojo.js" djConfig="parseOnLoad: false, isDebug: true"></script>

		<script language="JavaScript" type="text/javascript">
			//dojo.require("dojo.parser"); 
			dojo.require("dojox.mobile.parser"); // dojox.mobile.parser did not work
			dojo.require("dojox.mobile");
			dojo.require("dojox.mobile.TextBox");
			dojo.require("dojox.mobile.Button");
			dojo.require("dojox.mvc");
			dojo.require("dojox.mvc.Group");
			dojo.require("dojox.mvc.Repeat");
			dojo.require("dojo.data.ItemFileWriteStore");
			dojo.require("dojo.store.DataStore");
			
			dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

			var model, selectedIndex = 0, nextIndexToAdd, theModelPromise;

			function setup() {
				var writeStore = new dojo.data.ItemFileWriteStore({url: dojo.moduleUrl("dojox.mvc.tests._data", "mvcRepeatData.json")});
				var modelPromise = dojox.mvc.newStatefulModel({store: new dojo.store.DataStore({store: writeStore}), query:{"Location" : "CA"}}); // example of using a query parm for Location 
				modelPromise.then(function(results){ 
					model = results;
					nextIndexToAdd = model.data.length;
					//dojo.parser.parse();
					dojox.mobile.parser.parse();
				});
			};

			dojo.ready(setup);
		</script>
	</head>
	<body>
<h1 dojoType="dojox.mobile.Heading">Android Repeat Data Binding Example.</h1>
		<div >Search Results:</div>
		<div dojoType="dojox.mvc.Repeat" class="row" ref="model">
			<div class="row" dojoType="dojox.mvc.Group" ref="'rel:${this.index}'">
				<input dojoType="dojox.mobile.TextBox"
					id="nameInput${this.index}" ref="'rel:First'" placeHolder="First Name"/>
				<button id="details${this.index}" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="setDetailsContext('${this.index}')">Details</button>
			</div>
		</div>
		<div class="spacer"></div>
		<div dojoType="dojox.mvc.Group" ref="model">
			<div id="detailsBanner">Details for selected index:</div>
				<div id="detailsGroup" dojoType="dojox.mvc.Group" ref="'rel:0'">
					<div><label for="firstInput">First Name:</label></div>
					<div><input id="firstInput" dojoType="dojox.mobile.TextBox" ref="'rel:First'" placeHolder="First Name"/></div>
					<div><label for="lastInput">Last Name:</label></div>
					<div><input id="lastInput" dojoType="dojox.mobile.TextBox" ref="'rel:Last'" placeHolder="Last Name"/></div>
					<div><label for="emailInput">Email:</label></div>
					<div><input id="emailInput" dojoType="dojox.mobile.TextBox" ref="'rel:Email'" placeHolder="Email"/></div>
					<div><label for="telInput">Telephone:</label></div>
					<div><input id="telInput" dojoType="dojox.mobile.TextBox" ref="'rel:Tel'" placeHolder="Telephone"/></div>
					<div><label for="faxInput">Fax:</label></div>
					<div><input id="faxInput" dojoType="dojox.mobile.TextBox" ref="'rel:Fax'" placeHolder="Fax"/></div>
				</div>
			</div>		   
		<div class="spacer"></div>
		<button id="add" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="insertResult(nextIndexToAdd)">Add</button>
		<button id="save" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="console.log(model[selectedIndex].toPlainObject());model[selectedIndex].commit()">Save</button>
		<button id="reset" type="button" dojoType="dojox.mobile.Button" class="mblBlueButton" onclick="model.reset()">Reset</button>
		<script type="text/javascript">
			function setDetailsContext(index){
				selectedIndex = index;
				var groupRoot = dijit.byId("detailsGroup");
				groupRoot.set("ref", index);
			}

			function insertResult(index){
				if (model[index-1].First.value !== ""){ // TODO: figure out why we are getting called twice for each click
					var insert = dojox.mvc.newStatefulModel({ "data" : {
						"First"	  : "",
						"Last"	  : "",
						"Location": "CA",
						"Office"  : "",
						"Email"	  : "",
						"Tel"	  : "",
						"Fax"	  : ""} 
					});
					model.add(index, insert);
					setDetailsContext(index);
					nextIndexToAdd++;
				}else{
					setDetailsContext(index-1);					
				}
			}
		</script>				 
	</body>
</html>
